<template>
	<view>
		<!-- <liuyuno-tabs :tabData="items" :defaultIndex="current" @tabClick="onClickItem" /> -->
		<view class="texthint">温馨提示:素材库仅供用户体验使用，更多资源可从网络各个渠道获取保存手机相册即可投影使用</view>
		<view style="display: flex; flex-wrap: wrap; justify-content: space-around">
			<view :class="current === index ? 'tag-item-check' : 'tag-item'" v-for="(item,index) in items" :key="index"
				@tap="getimgdetailList(item.id,index)">{{item.name}}</view>
		</view>


		<view class="imgList">
			<view class="imgBox" v-for="(item,index) in imgList" :key="index"
				@tap="$tab.reLaunch(`/pages/tabbar/more/more?img=${item}`)">
				<image :src="item" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		typeList,
		imgdetailList
	} from '@/api/api'
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	export default {
		components: {
			liuyunoTabs
		},
		data() {
			return {
				current: 0,
				items: [],
				imgList: [{
						url: 'https://ty.ttxcx.net/static/aaaa.png'
					},
					{
						url: 'https://ty.ttxcx.net/static/cccc.jpg'
					},
					{
						url: 'https://ty.ttxcx.net/static/eee.png'
					},
					{
						url: 'https://ty.ttxcx.net/static/ccc.png'
					},
					{
						url: 'https://ty.ttxcx.net/static/ddd.png'
					},
					{
						url: 'https://ty.ttxcx.net/static/fff.png'
					}
				]
			};
		},
		created() {
			this.getypeList()
		},
		methods: {
			getypeList() {
				typeList().then(res => {
					this.items = res.data
					console.log(JSON.stringify(res))
					if (res.data) {
						this.getimgdetailList(res.data[0].id)
					}
				})
			},
			getimgdetailList(id, index) {
				this.current = index
				imgdetailList({
					id: id
				}).then(res => {
					this.imgList = res.data
				})
			},
		},
	}
</script>

<style lang="scss">
	.tag-item {
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		margin: 10rpx 0;
		background-color: white;
		border: 1rpx solid black;
	}

	.texthint {
		text-align: center;
		width: 596rpx;
		margin: 10rpx auto;
	}

	.tag-item-check {
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: red;
		color: white;
		margin: 10rpx 0;
	}


	.itemList {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		justify-content: space-between;
	}

	.namebox {
		width: 345rpx;
		height: 400rpx;
		border-radius: 20rpx;
		border: black 1px solid;
		overflow: hidden;
		margin: 10rpx 0;
	}

	.imgList {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		justify-content: space-between;
	}

	.imgBox {
		width: 345rpx;
		height: 400rpx;
		border-radius: 20rpx;
		border: black 1px solid;
		overflow: hidden;
		margin: 10rpx 0;
	}

	.imgBox image {
		width: 100%;
		height: 100%;
	}
</style>